<template>
	<div class="custom-container">
		
		<el-form label-position="top">
			<el-form-item label="视角FOV">
				<div style="display: flex; width: 100%; padding: 0px 10px;">
					<div style="flex: 1; padding-right:10px;">
						<el-slider v-model="panoData.fov" @input="handleFovChanged"  @change="handlehlookatChanged" :min="-360" :max="360"></el-slider>
					</div>
					<div style="width: 50px;">
						<el-input v-model="panoData.fov" @change="handleFovChanged"></el-input>
					</div>
				</div>
			</el-form-item>
			
			
			<el-form-item label="水平视角">
				<div style="display: flex; width: 100%; padding: 0px 10px;">
					<div style="flex: 1; padding-right:10px;">
						<el-slider v-model="panoData.hlookat" @input="handlehlookatChanged"  @change="handlehlookatChanged" :min="-360" :max="360"></el-slider>
					</div>
					<div style="width: 50px;">
						<el-input v-model="panoData.hlookat" @change="handlehlookatChanged"></el-input>
					</div>
				</div>
			</el-form-item>
			
			
			<el-form-item label="垂直视角">
				<div style="display: flex; width: 100%; padding: 0px 10px;">
					<div style="flex: 1; padding-right:10px;">
						<el-slider v-model="panoData.vlookat" @input="handlevlookatChanged"  @change="handlevlookatChanged" :min="-360" :max="360"></el-slider>
					</div>
					<div style="width: 50px;">
						<el-input v-model="panoData.vlookat" @change="handlevlookatChanged"></el-input>
					</div>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		props: ["panoData"],
		data(){
			return{
				 
				 fov:75,
				 hlookat:0,
				 vlookat:0,
				 baseicVisible:false
			}
		},
		methods:{
			handleEditInfo(){
				this.baseicVisible=true;
				console.log("show");
			},
			handleFovChanged(val){
				this.$emit("changeview",'fov',val);
			},
			handlehlookatChanged(val){
				this.$emit("changeview",'hlookat',val);
			},
			handlevlookatChanged(val){
				this.$emit("changeview",'vlookat',val);
			}
		},
		watch: {
			panoData: function(val) {
				console.log(val);
			},
			
		}
	}
</script>

<style scoped>
	.custom-container {
		position: relative;
		/* 确保子元素可以绝对定位 */
		width: 100%;
		/* 父容器宽度 */
		height: 100%;
		/* 父容器高度 */
	}
</style>